<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix heaterTitle">
        <span>帝可得后台</span>
      </div>
      <el-form
        :model="formValue"
        :rules="rules"
        ref="formValue"
        class="demo-ruleForm"
      >
        <el-form-item  prop="loginName">
          <el-input
            placeholder="请输入用户名"
            v-model="formValue.loginName"
            autocomplete="off"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="formValue.password"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" class="code">
          <el-input
            style="width: 410px"
            v-model="formValue.code"
            placeholder="请输入验证码"
          >
            <img
              slot="append"
              :src="changeImage"
              class="codeImage"
              @click="changeImg"
            />
          </el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" :loading="flag" @click="onSubmit"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { setName } from '@/utils/storage'
export default {
  name: 'login-page',
  data() {
    return {
      formValue: {
        loginName: 'admin',
        password: 'admin',
        clientToken: '',
        loginType: 0,
        code: ''
      },
      rules: {
        loginName: [
          { required: true, message: '用户名不能为空' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{5,12}$/,
            message: '用户名由5-12位大小写字母、汉字构成',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '密码不能为空' },
          {
            pattern: /^(?=.*[a-z])[a-z\d]{4,12}$/,
            message: '密码必须由4-12位小写字母、数字等构成',
            trigger: 'blur'
          }
        ]
      },
      flag: false,
      random: Math.random(),
      changeImage: ''
    }
  },
  methods: {
    changeImg() {
      this.random = Math.random()
      this.handleClickImge()
      console.log(this.random)
    },
    handleClickImge() {
      this.changeImage =
        'http://likede2-admin.itheima.net/likede/api/user-service/user/imageCode/' +
        this.random
    },
    async onSubmit() {
      await this.$refs.formValue.validate()
      this.formValue.clientToken = this.random
      await this.$store.dispatch('user/login', this.formValue)
      setName(this.formValue.loginName)
      this.$router.push('/')
    }
  },
  mounted() {
    this.handleClickImge()
  }
}
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/background.be4fae7d.png') center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .box-card {
    border-radius: 10px;
    width: 520px;
    ::v-deep .el-card__header {
      background-color: rgb(131, 78, 222);
    }
    .heaterTitle {
      text-align: center;
      color: #fff;
    }
  }
}

::v-deep .btns .el-form-item__content {
  text-align: center;
}

::v-deep .el-input__inner {
  width: 100%;
  height: 52px;
}

.imgBox {
  width: 60px;
  height: 40px;
  z-index: 999;
}

::v-deep .el-input-group__append {
  background-color: #fff;
  border: none;
}

  .el-button--primary {
    height: 52px;
    background-color: #546de8;
    width: 100%;
  }

</style>
